<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统管理员个人修改</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css">

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

    </style>

</head>
<body>
<div id="app">

    <el-container style="height: 800px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;position: relative">

                <el-form>
                    <el-form-item  label="工号：" prop="jobNumber">
                        <el-input style="width: 250px" v-model="formData_update.jobNumber"></el-input>
                    </el-form-item>

                    <el-form-item  label="密码：" prop="password">
                        <el-input style="width: 250px" v-model="formData_update.password"></el-input>
                    </el-form-item>

                    <el-form-item  label="姓名：" prop="name">
                        <el-input style="width: 250px" v-model="formData_update.name"></el-input>
                    </el-form-item>


                    <el-form-item  label="身份证：" prop="idNumber">
                        <el-input style="width: 250px" v-model="formData_update.idNumber"></el-input>
                    </el-form-item>

                    <el-form-item  label="手机：" prop="phone">
                        <el-input style="width: 250px" v-model="formData_update.phone"></el-input>
                    </el-form-item>

                    <el-form-item  label="照片：" prop="image">
                        <el-upload class="avatar-uploader"
                                   action="/files/uploadFile"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeUpload"
                                   ref="upload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>

                <el-button type="primary" style="margin-left:50px; " size="medium " @click="UpdateAdminSystem">修改1</el-button>

            </div>
        </el-container>
    </el-container>

</div>


<script src="../../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{

            adminSystemInfo:{}, //当前用户信息

            formData_update:{
                image:''
            },

            // imageUrl1:'',



        },
        created() {
            const adminSystemInfo = window.localStorage.getItem('adminSystem')
            console.log("adminSystemInfo1:::"+adminSystemInfo)
            if (adminSystemInfo) {
                this.adminSystemInfo = JSON.parse(adminSystemInfo)
            }
            console.log("adminSystemInfo2:::"+adminSystemInfo)
            this.getMyself(this.adminSystemInfo);

        },

        methods:{

            //数据回显
            getMyself(row){
                axios.get("/adminSystems/getMyself/"+row.data.id).then((res)=>{
                    console.log("oookk")
                    console.log(res)
                    this.imageUrl = `/files/downloadFile?name=${res.data.data.image}`
                    this.formData_update.image=res.data.data.image

                    this.adminSystemInfo=res.data.data
                    this.formData_update=res.data.data
                })
            },

            //确定修改
            UpdateAdminSystem(){
                axios.put("/adminSystems/updateAdminSystem",this.formData_update).then((res)=>{
                    if (res.data.code){
                        this.$message.success("修改个人信息成功")
                        //修改localStorage的值
                        localStorage.setItem('adminSystem',JSON.stringify(res.data))
                    }else{
                        this.$message.error("修改个人信息失败")
                    }
                }).finally(()=>{
                    //刷新父页面
                    parent.window.location.reload();

                    this.getMyself();
                })
            },

            //4.图片文件上传
            handleAvatarSuccess (response, file, fileList) {
                this.formData_update.image=response.data
                // this.dishAddShow.avatar=<res className="data"></res>;

                this.imageUrl = `/files/downloadFile?name=${response.data}`

                console.log("response:")

                console.log(response)
            },
            beforeUpload (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
            getImage (image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },
        }
    })

</script>

</body>
</html>




